<template>
	<div class="main">
		<div class="main-header" style="display: flex;justify-content: space-between;">
			<div style="display: flex;flex:1;flex-wrap: wrap;max-width: 80%;gap:10px;">
				<el-input v-model="searchParamCp.search" placeholder="请输入关键字"
					style="width:200px ;"></el-input>
				<!-- <shequSelect style="width: 200px;;margin-left: 10px;" v-model="searchParamCp.community_id"></shequSelect> -->
				<el-select v-model="searchParamCp.pay_status" placeholder="请选择支付状态" style="width:200px;margin-left: 10px;">
					<el-option v-for="(item, index) in payList" :key="index" :label="item" :value="index">
					</el-option>
				</el-select>
				<el-select v-model="searchParamCp.status" placeholder="请选择审核状态" style="width:200px;margin-left: 10px;">
					<el-option v-for="(item, index) in statusList" :key="index" :label="item" :value="index">
					</el-option>
				</el-select>
				<el-select v-model="searchParamCp.verifiy_status" placeholder="请选择核销状态" style="width:200px;margin:0 10px;">
					<el-option v-for="(item, index) in typeList" :key="index" :label="item" :value="index">
					</el-option>
				</el-select>
				<div class="ml-10" style="width:340px;margin-right: 10px;">
					<el-date-picker clearable v-model="searchParamCp.search_time" value-format="timestamp" type="daterange"
						range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期">
					</el-date-picker>
				</div>
				<div class="ml-10">
					<el-button type="primary" @click="searchinfo">搜索</el-button>
					<el-button type="primary" @click="reset">重置</el-button>
				</div>
			</div>
			<div style="display: flex;">
				<!-- <el-button type="primary" @click="add()">添加</el-button> -->
				<!-- <el-upload-file :showfile="false" v-model="importindex"  @click="importExcel()"
				accept=".xlsx" style="margin: 0 10px;" title="导入"></el-upload-file> -->
				<!-- <eluploadfile v-if="$auth('import')" :auto-upload="false" :upload-clear="true" :show-file-list="false" @change="upload" :limit="1" :multiple="false" accept=".xls,.xlsx" class="ml-10">
				    <el-button type="primary" >导入</el-button>
				</eluploadfile> -->
				<el-button v-if="$auth('export')" type="primary" @click="exportExcel">导出</el-button>
				<!-- <el-button style="margin-left: 10px;"  type="danger" @click="selectdel"
					:disabled="!selection.length">批量删除</el-button> -->
			</div>
		</div>
		<el-table ref="table" class="main-table" header-align="center" border :data="list" :summary-method="getSummaries"
			show-summary @selection-change="onSelectionChange" height="100%" row-key="id"
			header-cell-class-name="main-table-header" @row-click="onRowClick">
			<el-table-column type="selection" width="50"> </el-table-column>
			<el-table-column show-overflow-tooltip label="用户名称" prop="username"></el-table-column>
			<!-- <el-table-column label="活动图">
				<template slot-scope="{row}">
					<el-image v-for="(item,index) in row.img.split(',')" style="width:60px;height:60px" :src="item" :preview-src-list="[item]">
					</el-image>
				</template>
			</el-table-column> -->
			<!-- <el-table-column show-overflow-tooltip label="社区名称" prop="community_name"></el-table-column> -->
			<!-- <el-table-column v-if="$route.query.type" show-overflow-tooltip label="联系方式" prop="mass_mobile" width="120px"></el-table-column> -->
			<el-table-column show-overflow-tooltip label="活动名称" prop="activity_name"></el-table-column>
				<!-- 1志愿者招募活动2普通活动 -->
			<!-- <el-table-column label="活动类型">
			
				<template slot-scope="{row}">
					<el-tag v-if="row.type == 1">志愿者招募活动</el-tag>
					<el-tag v-if="row.type == 2" type="success">普通活动</el-tag>
				</template>
			</el-table-column> -->
			<el-table-column show-overflow-tooltip label="金额" prop="pay_money" sortable></el-table-column>
			<el-table-column label="支付状态">
				<!-- .支付状态 0未支付 1已支付 3已取消/退款， -->
				<template slot-scope="{row}">
					<el-tag v-if="row.pay_status == 0">未支付</el-tag>
					<el-tag v-if="row.pay_status == 1" type="success">已支付</el-tag>
					<el-tag v-if="row.pay_status == 3 && row.type == 2" type="warning">已退款</el-tag>
					<el-tag v-if="row.pay_status == 3 && row.type == 1" type="danger">已取消</el-tag>
					<!-- <el-tag v-if="row.type==1"  type="info">无需支付</el-tag> -->
				</template>
			</el-table-column>
			<el-table-column label="报名状态">
				<!--status报名状态 0待付款 1报名成功 2部分取消 3已取消 -->
				<template slot-scope="{row}">
					<el-tag v-if="row.status == 0">待付款</el-tag>
					<el-tag v-if="row.status == 1" type="success">报名成功</el-tag>
					<el-tag v-if="row.status == 2" type="warning">部分取消</el-tag>
					<el-tag v-if="row.status == 3" type="danger">已取消</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="核销状态">
				<!--status核销状态0未核销 1己核销· -->
				<template slot-scope="{row}">
					<el-tag v-if="row.verifiy_status == 0">未核销</el-tag>
					<el-tag v-if="row.verifiy_status == 1" type="success">己核销</el-tag>
				</template>
			</el-table-column>

			<!-- <el-table-column show-overflow-tooltip label="志愿者活动获得积分" prop="score" ></el-table-column> -->
			<el-table-column label="核销时间" prop="verifiy_time">
				<template slot-scope="{row}" v-if="row.verifiy_time">
					{{ dateFormat(row.verifiy_time) }}
				</template>
			</el-table-column>
			<el-table-column label="报名时间" prop="addtime">
				<template slot-scope="{row}"  v-if="row.addtime">
					{{ dateFormat(row.addtime) }}
				</template>
			</el-table-column>
			<el-table-column label="支付时间" prop="pay_time">
				<template slot-scope="{row}"   v-if="row.pay_time">
					<div>{{ dateFormat(row.pay_time) || '' }}</div>
					<!-- <div v-if="row.type==1">无需支付</div> -->
				</template>
			</el-table-column>
			<!-- <el-table-column label="操作">
				<template slot-scope="{row}">
					<el-button type="warning" @click.stop="add(row)">明细</el-button>
				</template>
			</el-table-column> -->
		</el-table>
		<el-pagination class="main-pagination" :current-page.sync="searchParam.page" :page-size="searchParam.limit"
			:total="searchParam.total" @current-change="onCurrentChange" layout="total,jumper,prev,pager,next">
		</el-pagination>
		<el-dialog :title="title" :key="formDataStatus" :visible.sync="centerDialogVisible" @close="onDialogClose"
			width="60%">
			<add @close="close" :formData="userinfo" @search="addcommunity"></add>
		</el-dialog>
	</div>
</template>
<script>
// import companyCate from '@/components/company-cate.vue'
// import supervisorSelect from '@/components/supervisor-select.vue'auth
import add from './components/add.vue'
import { imghttp, get, post, del } from '@/assets/js/http'
import shequSelect from '@/components/shequ-select.vue'
// import eluploadfile from '../../components/el-upload-file.vue'
export default {
	components: { add, shequSelect },
	data() {
		return {
			list: [],
			selection: [],
			addShow: false, //添加显示
			centerDialogVisible: false, //详情弹窗
			title: '', //弹窗标题
			userinfo: [], //用户信息
			typeList: ['未核销', '已核销'], //核销状态 0未核销 1已核销
			statusList: ['待付款', '报名成功', '部分取消', '已取消'], //审核状态0待付款 1报名成功 2部分取消 3已取消
			payList: ['未支付', '已支付'],//支付状态 0未支付 1已支付
			searchParam: {
				page: 1,
				limit: 20,
				total: 0,
				cadre_id: '',
				search_time: [],
				status: '',
				verifiy_status: '',
				type: '',
				search: '',
				activity_id: '',
				pay_status: '',
			},
			searchParamCp: {
				status: '',
			},
			formDataStatus: false,
			imgs: [],
			sign_total_price: '',
			total_count: '',
		}
	},
	created() {
		Object.assign(this.searchParam, this.$route.query ? this.$route.query : {})
		Object.assign(this.searchParamCp, this.$route.query ? this.$route.query : {})
		this.searchParamCp.activity_id = this.$route.query.activity_id || ''
		this.getList()
	},
	updated() {

		this.$nextTick(() => {

			this.$refs.table.doLayout();

		});

	},
	watch: {
		'$route': {
			deep: true,
			handler() {
				this.reset()
			}
		},
	},
	methods: {
		//获取社区列表
		async getList() {
			this.$loading()
			// let { list,total } = 
			await get({
				url: '/admin/project.ActivityUser/index',
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						search_time: this.searchParam.search_time.length ? this.searchParam.search_time.map(item => item / 1000) : ''
					}
				},

			}).then(res => {
				this.list = res.list.list
				this.searchParam.total = res.total
				this.sign_total_price = res.list.sign_total_price
				this.total_count = res.list.total_count
				console.log(res)
				// this.importindex = []
				this.$loading().close()
			})
		},
		//添加/编辑弹窗
		add(row) {
			if (row) { //编辑
				this.centerDialogVisible = true
				this.title = "明细"
				post({
					url: '/admin/project.ActivityUser/activitySpec',
					data: {
						activity_user_id: row.id
					}
				}).then(res => {
					const form = JSON.parse(JSON.stringify(res.list))
					this.userinfo = form
					console.log(form, 'form', this.userinfo)
				})

				// let imgs = []
				// form.img = form.img.split(',')
				// form.img.forEach(item=>{
				// 	imgs.push({name:item,url:item})
				// })
				// form.img = imgs
				// form.location = { lat:form.latitude,lng:form.longitude}
				// form.paytime = form.paytime*1000
				// form.addtime = form.addtime*1000
				// this.userinfo = form
				// console.log(this.userinfo,'this.userinfo.img',this.userinfo.location,form.location)

			} else { //添加
				this.userinfo = {}
				this.centerDialogVisible = true
				this.title = "添加活动"
			}
			this.formDataStatus = true;
		},
		//添加课程
		addcommunity(result) {
			const info = JSON.parse(JSON.stringify(result))
			console.log(result)
			this.imgs = []
			info.img.forEach(item => {
				this.imgs.push(item.url)
			})
			info.img = this.imgs.join(',')
			// info.desc = ''
			console.log(info, info.img, this.imgs)
			// return
			if (info.id) {
				post({
					url: '/admin/project.Activity/edit',
					data: info,
					successTip: true,
				}).then(res => {
					this.close()
					this.getList()
				})
			} else {
				post({
					url: '/admin/project.Activity/add',
					data: info,
					successTip: true,
				}).then(res => {
					this.close()
					this.getList()
				})
			}
		},
		//关闭弹窗
		close() {
			this.centerDialogVisible = false
		},
		reset() {
			this.searchParamCp = this.$options.data().searchParam
			this.searchParam = this.$options.data().searchParam
			this.getList()
		},
		searchinfo() {
			this.searchParam.page = 1
			this.searchParam = {
				...this.searchParam,
				...this.searchParamCp
			}
			this.getList()
		},
		onCurrentChange() {
			this.getList()
		},
		onRowClick(row) {
			this.$refs.table.toggleRowSelection(row);
		},
		onSelectionChange(selection) {
			this.selection = selection;
		},
		selectdel() {
			this.$confirm(
				`此操作将永久删除该${this.selection.length}个活动, 是否继续?`,
				"提示", {
				confirmButtonText: "确定",
				cancelButtonText: "取消",
				type: "warning"
			}
			)
				.then(async () => {
					let query = "?";
					for (let i = 0; i < this.selection.length; i++) {
						const item = this.selection[i];
						if (i > 0) {
							query += "&ids[]=" + item.id;
						} else {
							query += "ids[]=" + item.id;
						}
					}
					await del({
						url: "/admin/project.Activity/del" + query,
						successTip: true,
						loading: true
					});
					this.getList()
				})
				.catch(() => {
					this.$refs.table.clearSelection();
				});
		},
		dateFormat: function (value) {
			var date = new Date(value * 1000); //时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var year = date.getFullYear();
			var month = ("0" + (date.getMonth() + 1)).slice(-2);
			var sdate = ("0" + date.getDate()).slice(-2);
			var hour = ("0" + date.getHours()).slice(-2);
			var minute = ("0" + date.getMinutes()).slice(-2);
			var second = ("0" + date.getSeconds()).slice(-2);
			// 拼接
			var result = year + "年" + month + "月" + sdate + "日 " + hour + ":" + minute //+ ":" + second;
			// 返回
			return result;
		},
		//导出
		async exportExcel() {
			this.$loading()
			let res = await get({
				export: true,
				url: '/api/Realmerit/activity_export',
				params: {
					...this.searchParam,
					...{
						server_type: this.$route.query.type ? 2 : 1,
						search_time: this.searchParam.search_time.length ? this.searchParam.search_time.map(item => item / 1000) : ''
					}
				}
			})
			let a = document.createElement('a');
			var url = URL.createObjectURL(res);
			a.href = url;
			a.click();
			this.$loading().close()
		},
		//导入
		async upload({
			raw
		}) {
			this.$loading({
				text: '导入中 请等待...'
			})
			console.log(raw)
			await imghttp({
				url: '/admin/basic.Masses/import',
				data: {
					file: raw
				},
				successTip: true
			})
			this.getList()
			this.$loading().close()
		},
		onDialogClose() {

		},
		getSummaries(param) {
			const { columns, data } = param;
			const sums = [];
			columns.forEach((column, index) => {
				if (index === 0) {
					sums[index] = '总计';
					return;
				}
				if (index === 5) {
					sums[index] = '报名总价格：' + this.sign_total_price + '元';
					return;
				} if (index === 1) {
					sums[index] = '报名人数：' + this.total_count;
					return;
				}
			});

			return sums;
		}

	}
}
</script>

<style>
.el-date-editor .el-range-separator {
	padding: 0;
}
</style>
